<template>
    <div>
        <div class="parent-element-center">
            <svg :width="diameterShow" :height="diameterShow" :viewbox="viewbox">
                <circle :cx="size" :cy="size" :r="raduisActual" :stroke-width="strokeWidth" stroke="#eee"
                        fill="none"></circle>
                <circle v-if="rate" :text="text" :cx="size" :cy="size" :r="raduisActual" :stroke-width="strokeWidth"
                        :stroke="strokeColor" fill="none" :transform="transform" :stroke-dasharray="strokeDasharray"
                        stroke-linecap="round"></circle>
            </svg>
            <div class="element-center" :style="textStyle">{{ text }}</div>
        </div>

        <svg width="440" height="440">
            <!-- 底部的灰色背景圆环 -->
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
            <!-- 需要显示的圆环  通过修改 stroke-dasharray="0 1069"的0值那块，(角度/360) = 圆弧长度/周长  这里的圆弧长度就是第一个值-->
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none"
                    transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
            <!-- transform="matrix(0,-1,1,0,0,440)"这个是让实线从12点开始 需要研究的话 文章末尾有相关链接 -->
        </svg>


        <div style="width: 100px;height:100px;position: relative;display: flex;justify-content: center;align-items: center;">
            <div class="bg-right-half-ring"  style="width: 100px;height:100px;border-radius:100px;border:20px solid rgb(238,238,238);position:absolute;clip:rect(0 100px 100px 50px);box-sizing: border-box;z-index: 1;"></div>
            <!-- 72/360=20% -->
            <div class="front-left-half-ring"  style="width: 100px;height:100px;border-radius:100px;border:20px solid rgba(0,200,0,0.7);position:absolute;clip:rect(0 50px 100px 0);box-sizing: border-box;z-index: 2;transform: rotate(72deg);">

            </div>
            <div class="bg-left-half-ring"  style="width: 100px;height:100px;border-radius:100px;border:20px solid rgb(238,238,238);position:absolute;clip:rect(0 50px 100px 0);box-sizing: border-box;z-index: 3;"></div>
<!--            &lt;!&ndash; 想要240度圆环的话  这边旋转 240-180=60 &ndash;&gt;-->
<!--            <div class="right-half-ring"  style="width: 100px;height:100px;border-radius:100px;border:4px solid rgba(0,200,0,0.7);position:absolute;clip:rect(0 100px 100px 50px);box-sizing: border-box;z-index: 4;transform: rotate(60deg);"></div>-->
            <span id="progress">20%</span>
        </div>

        <canvas id="canvas" width="300" height="300">
            <p>抱歉，您的浏览器不支持canvas</p>
        </canvas>


    </div>


</template>
<script>
    export default {
        props:  {
            // 圆环外圈的直径
            size: {
                default: 220
            },
            // 圆环的小宽度
            strokeWidth: {
                default: 50
            },
            // 圆环的颜色
            strokeColor: {
                default: '#00D476'
            },
            // 圆环显示的百分比 这边是小数
            rate: {
                default: 0.5
            },
            // 圆环里面的文字 这里的文字如果跟rate息息相关 可以放到computed计算
            text: {
                default: 50
            },
            // 圆环里面的文字的fontSize大小
            textSize: {
                default: 20
            }
        },
        methods: {


        },
        computed: {
            raduisActual() {
                return this.size - this.strokeWidth
            },
            diameterShow() {
                return 2 * this.size
            },
            viewbox() {
                return `0 0 ${this.diameterShow} ${this.diameterShow}`
            },
            strokeDasharray() {
                const perimeter = Math.PI * 2 * this.raduisActual
                const showLength = this.rate * perimeter - 3
                return `${showLength} 1000`
            },
            transform() {
                return `matrix(0,-1,1,0,0,${this.diameterShow})`
            },
            textStyle() {
                let res = {}
                res.fontSize = `${this.textSize}px`
                return res
            }
        }
    }
</script>
<style scoped>
    .parent-element-center {
        position: relative;
        display: inline-block;
    }

    .element-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        font-weight: bold;
    }
</style>
